<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<%
    String basePath = request.getContextPath();
%>
<TITLE>extJs 拖动</TITLE>
<link type="text/css" rel="stylesheet" href="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="<%=basePath %>/ExtJs5/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> 
<style type="text/css">
.red-row {
	background-color: red !important;
}

.yellow-row {
	background-color: yellow !important;
}

HR {
	clear: both;
	visibility: hidden
}

.block {
	border: 1px red solid;
	margin: 10px;
	min-height: 80px;
}

.item {
	border: 1px green solid;
	background: green;
	float: left;
	margin: 10px;
	width: 50px;
	min-height: 50px;
	text-align: center;
}
</style>
<script type="text/javascript">
	Ext.onReady(function() {
		var proxy = new Ext.dd.DragSource('proxy', {
			group : 'dd',/*定义可拖动对象*/
		});

		proxy.afterDragDrop = function(target, e, id) {
			var destEl = Ext.get(id);
			var srcEl = Ext.get(proxy.getEl());
			srcEl.insertBefore(destEl);
		};

		var target = new Ext.dd.DDTarget('target', 'dd');/*定义可拖动区域*/
	});
</script>
</HEAD>
<BODY>
	<div id="proxy" class="item">item</div>
	<hr />
	<div id="target" class="block">
		<hr />
	</div>
</BODY>
</HTML>